织梦cms| 帝国cms| WordPress discuz| phpcms| z-blog| ecshop| 其他cms|

WordPress

推荐列表 站点导航

当前位置：首页 > 建站教程 > WordPress >

js实现3D旋转相册的操作

来源:网络整理  作者:  发布时间:2020-12-18 23:44
本文实例为大家分享了js实现3D旋转相册的具体代码，供大家参考，具体内容如下效果展示：（图片大小为133*200）代码...

效果展示：（图片大小为133*200）

js实现3D旋转相册的操作 (https://www.wpmee.com/) javascript教程 第1张

代码展示：

<!DOCTYPE html>

<!--设置图片的拖拽事件 不可用-->

<html lang="en" ondragstart="return false">

<head>

<meta charset="UTF-8">

<title>3D效果</title>

<style>

* {

background-color: #000;

}

.container {

border: 1px solid yellow;

perspective: 800px;

overflow: hidden;

}

.box {

position: relative;

border: 1px solid #f00;

width: 133px;

height: 200px;

margin: 300px auto;

transform-style: preserve-3d;

transform:rotateX(-20deg) rotateY(0deg);

}

img {

position: absolute;

/*设置图片倒影效果*/

-webkit-box-reflect:below 5px -webkit-gradient(linear,left top, left bottom,from( transparent),color-stop(40%,transparent),to(rgba(250,250,250,0.4)));

}

</style>

</head>

<body>

<div>

<div>

<img src="https://www.wpmee.com/img/1.jpg" alt="">

<img src="https://www.wpmee.com/img/2.jpg" alt="">

<img src="https://www.wpmee.com/img/3.jpg" alt="">

<img src="https://www.wpmee.com/img/4.jpg" alt="">

<img src="https://www.wpmee.com/img/5.jpg" alt="">

<img src="https://www.wpmee.com/img/6.jpg" alt="">

<img src="https://www.wpmee.com/img/7.jpg" alt="">

<img src="https://www.wpmee.com/img/8.jpg" alt="">

<img src="https://www.wpmee.com/img/9.jpg" alt="">

<img src="https://www.wpmee.com/img/10.jpg" alt="">

<img src="https://www.wpmee.com/img/11.jpg" alt="">

</div>

</div>

<script>

// a 获取所有 img 元素

var mimg = document.querySelectorAll("img");

var mlength = mimg.length;

// 动态获取 图片的旋转角度

var mdeg = 360/mlength;

//获取box 容器

var mbox = document.querySelector(".box");

/*页面加载后执行。。效果*/

window.onload= function () {

// 1 图片旋转动画

for(var i = 0;i<mlength;i++){

// console.log(mimg);

//每张图片 1 60 2 120 3 180 4 240  60为图片的平分角

mimg[i].style.transform = "rotateY("+(mdeg*i)+"deg) translateZ(350px)";

// 添加过渡效果  动画执行多长时间 多久后开始执行动画 此时的效果 从最后一张开始动画

//  console.log(mlength-i);

mimg[i].style.transition = "1s "+(mlength-i)*0.1+"s"; //  0.1 动画调节

//从第一张开始动画

// mimg[i].style.transition = "1s "+i+"s";

}

// 获取鼠标点的位置 获取 差值 改变 转换的rotate： x y

var newX,newY,lastX,lastY,cvalueX,cvalueY, rotX=-20,rotY=0;

// 鼠标滑动后改变效果 (使用鼠标 按下 替换点击事件)

document.onmousedown = function (e) {

// 鼠标点击

//  console.log("点击");

lastX = e.clientX;

lastY = e.clientY;

// 鼠标移动

this.onmousemove = function (e) {

// console.log("移动");

newX = e.clientX;

newY = e.clientY;

console.log(newX +" "+newY);

//获取移动的差值

cvalueX = newX-lastX;

cvalueY = newY-lastY;

//获取旋转的角度

rotX -= cvalueY; /*因为要向前运动所以是负值*/

rotY += cvalueX;

// 将角度添加上 img容器

mbox.style.transform = "rotateX("+rotX*0.1+"deg) rotateY("+rotY*0.1+"deg)"

// 差值太大（转动太快） 调节每次的差值是和上一次差 而不是之前差（初始值的差）

lastX = newX;

lastY = newY;

}

// 鼠标抬起

this.onmouseup = function () {

// console.log("抬起");

// 要停止移动的方法

this.onmousemove = null;

}

}

}

</script>

</body>

</html>  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js实现3D旋转相册的操作 (https://www.wpmee.com/) javascript教程 第2张

相关热词：

本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规！

本文地址: https://v30.fanwenzhu.com/jz/wp/5364.shtml

上一篇：原生js canvas实现鼠标跟随
下一篇：有哪些提升网站排名的s
相关文章
热门TAG
win10 ecshop 主机 阿里云 解决 配置 C# C++ 解析 SQL语句 命令 Go语言 方法 CSS3 HTML5 CSS win7 MSSQL 服务器配置 IIS7.5 IIS7 IIS6 IIS CentOS 7 Linux oracle数据库 oracle phpcms discuz discuz教程
最新文章
ludou_se_only); } add_action(s ludou_se_only); } add_action(s

时间：2021-01-23

所以经常导致输错密码的 所以经常导致输错密码的

时间：2021-01-23

WordPress措施打开速度慢的 WordPress措施打开速度慢的

时间：2021-01-22

WordPress回覆评论自动添加 WordPress回覆评论自动添加

时间：2021-01-22

我们可以通过下面的代码 我们可以通过下面的代码

时间：2021-01-22

如何修改WordPress默认脚色 如何修改WordPress默认脚色

时间：2021-01-20

同样的修改文件就行 同样的修改文件就行

时间：2021-01-20

少数善意的转载者既使没 少数善意的转载者既使没

时间：2021-01-20

热门文章
WordPress新手安装教程(图文) WordPress新手安装教程(图文)

时间：2020-12-28

在设置菜单中增加WordPress私密 隐藏的全部 在设置菜单中增加WordPress私密 隐藏的全部

时间：2021-01-10

WordPress博客程序常见错误的解决方法 WordPress博客程序常见错误的解决方法

时间：2020-12-28

WordPress程序打开速度慢的三种解决方法 WordPress程序打开速度慢的三种解决方法

时间：2021-01-10

wordpress使用代码在每篇文章尾部添加版权 wordpress使用代码在每篇文章尾部添加版权

时间：2020-12-14

WordPress博客措施常见错误的办理要领 WordPress博客措施常见错误的办理要领

时间：2021-01-15

关于WordPress的SEO优化相关的一些PHP页面脚 关于WordPress的SEO优化相关的一些PHP页面脚

时间：2021-01-07

WordPress措施打开速度慢的三种办理要领 WordPress措施打开速度慢的三种办理要领

时间：2021-01-22

详解WordPress中的头像缓存和署理中的缓存 详解WordPress中的头像缓存和署理中的缓存

时间：2021-01-15

少数善意的转载者既使没有看到版权信息 少数善意的转载者既使没有看到版权信息

时间：2021-01-20

Copyright © www.juheyunku.com      关于 | 合作 | 声明 | 联系 | 更新 | 地图 | Tags

js实现3D旋转相册的操作

2020-12-18　编辑：

效果展示：（图片大小为133*200）

js实现3D旋转相册的操作 (https://www.wpmee.com/) javascript教程 第1张

代码展示：

<!DOCTYPE html>

<!--设置图片的拖拽事件 不可用-->

<html lang="en" ondragstart="return false">

<head>

<meta charset="UTF-8">

<title>3D效果</title>

<style>

* {

background-color: #000;

}

.container {

border: 1px solid yellow;

perspective: 800px;

overflow: hidden;

}

.box {

position: relative;

border: 1px solid #f00;

width: 133px;

height: 200px;

margin: 300px auto;

transform-style: preserve-3d;

transform:rotateX(-20deg) rotateY(0deg);

}

img {

position: absolute;

/*设置图片倒影效果*/

-webkit-box-reflect:below 5px -webkit-gradient(linear,left top, left bottom,from( transparent),color-stop(40%,transparent),to(rgba(250,250,250,0.4)));

}

</style>

</head>

<body>

<div>

<div>

<img src="https://www.wpmee.com/img/1.jpg" alt="">

<img src="https://www.wpmee.com/img/2.jpg" alt="">

<img src="https://www.wpmee.com/img/3.jpg" alt="">

<img src="https://www.wpmee.com/img/4.jpg" alt="">

<img src="https://www.wpmee.com/img/5.jpg" alt="">

<img src="https://www.wpmee.com/img/6.jpg" alt="">

<img src="https://www.wpmee.com/img/7.jpg" alt="">

<img src="https://www.wpmee.com/img/8.jpg" alt="">

<img src="https://www.wpmee.com/img/9.jpg" alt="">

<img src="https://www.wpmee.com/img/10.jpg" alt="">

<img src="https://www.wpmee.com/img/11.jpg" alt="">

</div>

</div>

<script>

// a 获取所有 img 元素

var mimg = document.querySelectorAll("img");

var mlength = mimg.length;

// 动态获取 图片的旋转角度

var mdeg = 360/mlength;

//获取box 容器

var mbox = document.querySelector(".box");

/*页面加载后执行。。效果*/

window.onload= function () {

// 1 图片旋转动画

for(var i = 0;i<mlength;i++){

// console.log(mimg);

//每张图片 1 60 2 120 3 180 4 240  60为图片的平分角

mimg[i].style.transform = "rotateY("+(mdeg*i)+"deg) translateZ(350px)";

// 添加过渡效果  动画执行多长时间 多久后开始执行动画 此时的效果 从最后一张开始动画

//  console.log(mlength-i);

mimg[i].style.transition = "1s "+(mlength-i)*0.1+"s"; //  0.1 动画调节

//从第一张开始动画

// mimg[i].style.transition = "1s "+i+"s";

}

// 获取鼠标点的位置 获取 差值 改变 转换的rotate： x y

var newX,newY,lastX,lastY,cvalueX,cvalueY, rotX=-20,rotY=0;

// 鼠标滑动后改变效果 (使用鼠标 按下 替换点击事件)

document.onmousedown = function (e) {

// 鼠标点击

//  console.log("点击");

lastX = e.clientX;

lastY = e.clientY;

// 鼠标移动

this.onmousemove = function (e) {

// console.log("移动");

newX = e.clientX;

newY = e.clientY;

console.log(newX +" "+newY);

//获取移动的差值

cvalueX = newX-lastX;

cvalueY = newY-lastY;

//获取旋转的角度

rotX -= cvalueY; /*因为要向前运动所以是负值*/

rotY += cvalueX;

// 将角度添加上 img容器

mbox.style.transform = "rotateX("+rotX*0.1+"deg) rotateY("+rotY*0.1+"deg)"

// 差值太大（转动太快） 调节每次的差值是和上一次差 而不是之前差（初始值的差）

lastX = newX;

lastY = newY;

}

// 鼠标抬起

this.onmouseup = function () {

// console.log("抬起");

// 要停止移动的方法

this.onmousemove = null;

}

}

}

</script>

</body>

</html>  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js实现3D旋转相册的操作 (https://www.wpmee.com/) javascript教程 第2张

本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供学习参考！
本文地址为 https://v30.fanwenzhu.com/jz/wp/5364.shtml

相关文章

风云图片

ludou_se_only); } add_action(s

ludou_se_only); } add_action(s

所以经常导致输错密码的

所以经常导致输错密码的

WordPress措施打开速度慢的

WordPress措施打开速度慢的

WordPress回覆评论自动添加

WordPress回覆评论自动添加

我们可以通过下面的代码

我们可以通过下面的代码

如何修改WordPress默认脚色

如何修改WordPress默认脚色

推荐阅读

返回WordPress频道首页